<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width:400px;height:200px;border:solid 1px black;margin:10px auto;position: relative;background: #ccc;overflow:hidden}
        .box2{width:400px;height:200px;border:solid 1px black;margin:10px auto;position: relative;background: #ccc;overflow:hidden}
        .box3{width:400px;height:200px;border:solid 1px black;margin:10px auto;position: relative;background: #ccc;overflow:hidden}
        
        .imgbox .item{width:400px;height:200px;font-size: 80px;line-height:200px;text-align:center;position: absolute;left:400px;top:0;}

        .item:nth-child(1){background: #399;}
        .item:nth-child(2){background: #393;}
        .item:nth-child(3){background: #993;}
        .item:nth-child(4){background: #939;}
        .item:nth-child(5){background: #339;}

        .btns input{position: absolute;width:40px;height:40px;top:80px;}
        .left{left:0;}
        .right{right:0;}

        .list{height:20px;position: absolute;bottom:0;left:0;right:0;display: flex;justify-content: center;}
        .list span{width:20px;height:20px;margin: 0 20px;text-align:center;line-height:20px;color: #fff;font-size:12px;background: rgba(200,200,200,0.6);border-radius:50%;cursor: pointer;}
        .list span.active{background: red;}
    </style>
</head>
<body>
    <div class="box1">
        <div class="imgbox">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
        </div>
    </div>
    <div class="box2">
        <div class="imgbox">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
        </div>
    </div>
    <div class="box3">
        <div class="imgbox">
            <div class="item">0</div>
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
            <div class="item">8</div>
        </div>
    </div>
</body>
<script src="../move.js"></script>
<script>

    function Banner(ops){
        // 1. 参数的解析和默认值处理
        this.box = ops.cont;
        this.page = ops.page===undefined ? true : ops.page;
        this.btn = ops.btn===undefined ? true : ops.btn;
        this.ap = ops.autoPlay===undefined ? true : ops.autoPlay;
        this.timeout = Math.abs(ops.timeout || 2000);
        this.index = ops.index || 0;

        // 2. 选择器的处理：根据传入的容器，选择内部的标签
        this.items = this.box.querySelectorAll(".item");
        
        this.init();
        
        // 3. 根据传入的参数，决定是否存在分页器
        if(this.page){
            // 创建分页器结构
            this.createPages();
        }
        
        // 6. 根据传入的参数，决定是否存在左右按钮
        if(this.btn){
            // 创建左右按钮结构
            this.createBtns();
        }

        // 8. 根据传入的参数，决定是否存在自动播放
        if(this.ap){
            this.autoPlay();
        }
    }
    Banner.prototype.createBtns = function(){
        this.left = document.createElement("input");
        this.left.className = "left";
        this.left.type = "button";
        this.left.value = "<";
        
        this.right = document.createElement("input");
        this.right.className = "right";
        this.right.type = "button";
        this.right.value = ">";
        
        this.btns = document.createElement("div");
        this.btns.className = "btns";
        this.box.appendChild(this.btns);

        this.btns.appendChild(this.left);
        this.btns.appendChild(this.right);

        // 7. 绑定左右按钮的事件
        this.addBtnsEvent();
    }
    Banner.prototype.createPages = function(){
        // 创建分页器结构
        let str = ""
        for(let i=0;i<this.items.length;i++){
            str += `<span>${i}</span>`;
        }
        this.list = document.createElement("div");
        this.list.innerHTML = str;
        this.list.className = "list";
        this.box.appendChild(this.list);

        // 设置默认样式
        this.list.children[this.index].className = "active";

        // 4. 绑定每个分页器索引
        this.addPageIndex();

        // 5. 绑定分页器的事件
        this.addPagesEvent();
    }
    Banner.prototype.addPagesEvent = function(){
        const that = this;
        for(let i=0;i<this.list.children.length;i++){
            this.list.children[i].onclick = function(){
                if(this.index > that.index){
                    that.changeImg(that.index, this.index, -1);
                }
                if(this.index < that.index){
                    that.changeImg(that.index, this.index, 1);
                }
                that.index = this.index;
            }
        }
    }
    Banner.prototype.autoPlay = function(){
        const that = this;
        let t = setInterval(()=>{
            this.changeIndexRight();
        }, this.timeout);

        this.box.onmouseenter = function(){
            clearInterval(t);
        }
        this.box.onmouseleave = function(){
            t = setInterval(()=>{
                that.changeIndexRight();
            }, that.timeout);
        }
    }
    Banner.prototype.addPageIndex = function(){
        for(let i=0;i<this.list.children.length;i++){
            this.list.children[i].index = i;
        }
    }
    Banner.prototype.init = function(){
        this.items[this.index].style.left = 0;
        
    }
    Banner.prototype.addBtnsEvent = function(){
        const that = this;
        this.left.onclick = function(){
            that.changeIndexLeft()
        }
        this.right.onclick = function(){
            that.changeIndexRight()
        }
    }
    Banner.prototype.changeIndexRight = function(){
        if(this.index === this.items.length-1){
            this.index = 0;
            this.prev = this.items.length-1;
        }else{
            this.index++;
            this.prev = this.index-1;
        }
        this.changeImg(this.prev, this.index, -1);
    }
    Banner.prototype.changeIndexLeft = function(){
        if(this.index === 0){
            this.index = this.items.length-1;
            this.prev = 0;
        }else{
            this.index--;
            this.prev = this.index+1;
        }
        this.changeImg(this.prev, this.index, 1);
    }
    Banner.prototype.changeImg = function(prev, now, d){
        this.items[prev].style.left = "0";
        move(this.items[prev], {
            left: 400 * d
        })
        this.items[now].style.left = d * -400 + "px";
        move(this.items[now], {
            left: 0
        })

        this.list.children[prev].className = "";
        this.list.children[now].className = "active";
    }

    new Banner({
        cont: document.querySelector(".box1"),
        page: false,
        btn: false,
        autoPlay:true,
        timeout: 3000,
        index:3
    });
    
    new Banner({
        cont: document.querySelector(".box2"),
        page: true,
        btn: false,
        autoPlay:false,
        timeout: 2000,
        index:1
    });
    
    new Banner({
        cont: document.querySelector(".box3"),
    });


    
    
</script>
</html>